<template>
	<view class="container">
		<uni-segmented-control
			active-color="#0b847b"
			:current="current"
			:values="items"
			@clickItem="onClickItem"
		/>

		<view class="pb15"></view>

		<view v-show="current === 0">
			<uni-card
				spacing="0"
				padding="30rpx 24rpx"
				is-full
				:border="false"
				v-for="(item, index) in examList"
				:key="index"
			>
				<view class="card">
					<view class="slot-box">
						<view class="content">
							<image
								class="image"
								src="/static/dangjian/paper.png"
							/>
							<view class="info">
								<view>{{ item.name }}</view>
								<view>
									<text>{{ renderSuggestTime(item) }}</text>
									<text class="p-5">|</text>
									<text>满分{{ item.score }}分</text>
								</view>
							</view>
						</view>
						<button
							class="btn primary plain"
							@tap="goExamPage(item)"
						>
							进入考核
						</button>
					</view>
				</view>
			</uni-card>
			<view v-if="examList.length == 0" class="no-data">暂无数据</view>
		</view>

		<view v-show="current === 1">
			<uni-card
				spacing="0"
				padding="30rpx 24rpx"
				is-full
				:border="false"
				v-for="(item, index) in unExamList"
				:key="index"
			>
				<view class="card">
					<view class="slot-box">
						<view class="content">
							<image
								class="image"
								src="/static/dangjian/paper.png"
							/>
							<view class="info">
								<view>{{ item.name }}</view>
								<view>
									<text>{{ renderSuggestTime(item) }}</text>
									<text class="p-5">|</text>
									<text>满分{{ item.score }}分</text>
								</view>
							</view>
						</view>
						<view
							v-if="item.answerStatus == 2"
							class="score"
							@tap="goDetailPage(item.id)"
						>
							<text>{{ item.userScore }}</text>
							<text>最新得分</text>
						</view>
					</view>
					<view class="card-footer">
						<view class="divider"></view>
						<view class="slot-box">
							<text class="time">
								{{ item.answerSubmitTime }}考过
							</text>
							<view
								v-if="!item.isMarking && item.answerStatus == 2"
								class="btns"
							>
								<button
									class="btn primary plain"
									@tap="goExamPage(item)"
								>
									再考一次
								</button>
								<button
									class="btn info plain"
									@tap="goHistoryList(item.examPaperId)"
								>
									考试记录
								</button>
							</view>
							<button
								v-if="item.isMarking && item.answerStatus == 1"
								class="btn primary plain"
								disabled
							>
								阅卷中
							</button>
						</view>
					</view>
				</view>
			</uni-card>
			<view v-if="unExamList.length == 0" class="no-data">暂无数据</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { getExamPaperList, getCompetedExamPaperList } from '@/net/lilunceyan.js'

const current = ref(0)
const items = ref(['未参与', '已参与'])
const examList = ref([])
const unExamList = ref([])

onMounted(() => {
	getExamList()
	getCompetedExamList()
})
const renderSuggestTime = item => {
	return item.isTimeLimit == 2 ? `限时${item.suggestTime}分钟` : '不限时'
}
const onClickItem = e => {
	if (current.value === e.currentIndex) return
	current.value = e.currentIndex
}
// 下拉刷新，获取最新的数据
onPullDownRefresh(async () => {
	current.value === 0 ? await getExamList() : await getCompetedExamList()
	uni.stopPullDownRefresh()
})
const getExamList = async () => {
	const res = await getExamPaperList()
	examList.value = res.data
}
const getCompetedExamList = async () => {
	const res = await getCompetedExamPaperList()
	unExamList.value = res.data
}
const goExamPage = ({ examPaperId: id }) => {
	uni.navigateTo({ url: `./exam?id=${id}` })
}
const goDetailPage = id => {
	uni.navigateTo({ url: `./detail?id=${id}` })
}
const goHistoryList = id => {
	uni.navigateTo({ url: `./historyList?id=${id}` })
}
</script>

<style lang="scss">
@import '/static/common.scss';
.container {
	padding: 24rpx;
}
.slot-box {
	justify-content: space-between;
	.content {
		flex: 1;
		display: flex;
		align-items: center;
		margin-right: 24rpx;
		overflow: hidden;
	}
	.image {
		display: block;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	.info {
		flex: 1;
		overflow: hidden;
		view {
			&:first-child {
				line-height: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #000;
			}
			&:last-child {
				line-height: 32rpx;
				font-size: 24rpx;
				color: #607fa1;
			}
		}
	}
	.score {
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		text {
			line-height: 1;
			&:first-child {
				font-size: 40rpx;
				font-weight: bold;
				color: #3b95ff;
			}
			&:last-child {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
.p-5 {
	padding: 0 10rpx;
}

.pb15 {
	padding-bottom: 30rpx;
}

.card-footer {
	.time {
		font-size: 24rpx;
		color: #999;
	}
	.btns {
		display: flex;
	}
}
.btn.primary{
	background-color: #0b847b;
	border-color: #0b847b;
}
</style>
